<template>
    <div class="data-container">
        <div class="data-header">
            <h1>江苏省人民检察院司法警务驾驶舱</h1>
        </div>
        <div class="data-content">
            <div class="data-content-top" ref="dataContentTopRef">
                <div class="data-content-left">
                    <PoliceDistrict/>
                    <WarningInfo/>
                </div>
                <div class="data-content-center">
                    <ProvinceData/>
                    <CenterMap/>
                </div>
                <div class="data-content-right">
                    <DeputyActivity/>
                    <UnitVideoAccessCategoryStatistics/>
                    <UsePoliceDistrictTrend/>
                </div>
            </div>
            <div class="data-content-bottom" ref="dataContentBottomRef">
                <YearDeputyActivityTrend/>
                <YearDeputyActivityCategoryTrend/>
                <YearPatrolQuantityTrend/>
                <UnitVideoAccessCategoryQuantityStatistics/>
            </div>
        </div>
    </div>
    <div class="data-time">
        <span class="date">{{ currentTime.time }}</span>
        <span class="time">{{ currentTime.date }}</span>
    </div>
</template>

<script setup>
import '@/assets/styles/bigDataCard.scss'
import ProvinceData from "@/views/CenterController/components/center/ProvinceData.vue";
import CenterMap from "@/views/CenterController/components/center/CenterMap.vue";
import PoliceDistrict from "@/views/CenterController/components/left/PoliceDistrict.vue";
import WarningInfo from "@/views/CenterController/components/left/WarningInfo.vue";
import DeputyActivity from "@/views/CenterController/components/right/DeputyActivity.vue";
import UnitVideoAccessCategoryStatistics
    from "@/views/CenterController/components/right/UnitVideoAccessCategoryStatistics.vue";
import UsePoliceDistrictTrend from "@/views/CenterController/components/right/UsePoliceDistrictTrend.vue";
import {useTemplateRef} from "vue";
import YearDeputyActivityTrend from "@/views/CenterController/components/bottom/YearDeputyActivityTrend.vue";
import YearDeputyActivityCategoryTrend
    from "@/views/CenterController/components/bottom/YearDeputyActivityCategoryTrend.vue";
import YearPatrolQuantityTrend from "@/views/CenterController/components/bottom/YearPatrolQuantityTrend.vue";
import UnitVideoAccessCategoryQuantityStatistics
    from "@/views/CenterController/components/bottom/UnitVideoAccessCategoryQuantityStatistics.vue";
import dayjs from "dayjs";

const dataContentTopRef = useTemplateRef('dataContentTopRef');
const dataContentBottomRef = useTemplateRef('dataContentBottomRef')

const currentTime = ref({
    date: '',
    time: ''
});
const updateTime = () => {
    const currentTimeDate = dayjs();
    currentTime.value = {
        date: currentTimeDate.format('YYYY-MM-DD'),
        time: currentTimeDate.format('HH:mm:ss')
    };
};
let timerId;
onMounted(() => {
    updateTime();
    timerId = setInterval(updateTime, 1000);
})

onUnmounted(() => {
    if (timerId) {
        clearInterval(timerId);
    }
});


</script>

<style>
:root {
    font-size: 16px;
    --data-text-color: rgb(169 212 255);
    --data-header-height: 80px;
    --data-header-content: calc(100vh - var(--data-header-height));
    --data-content: calc(var(--data-header-content) * 4.1 / 6);
    --data-content-top-height: calc(var(--data-header-content) / 7);
}

body {
    position: relative;
    width: 100%;
    height: 100%;
    background: url('/bg1.webp') no-repeat;
    background-size: cover;
    color: #ffffff;
}

#app {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#app::before {
    content: ' ';
    background: hsl(209.07deg 37.63% 14.07% / 50%);
    position: absolute;
    width: 100%;
    height: 100%;
}

.border-box-13 .border-box-content {
    --data-margin: 1rem;
    margin: var(--data-margin);
    width: calc(100% - var(--data-margin) * 2) !important;
    height: calc(100% - var(--data-margin) * 2) !important;
}
</style>
<style scoped lang="scss">
.data-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 99;
    text-shadow: 0 0 0.07rem #ffffff;

    .data-header {
        position: relative;
        width: 100%;
        height: var(--data-header-height);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;

        h1 {
            margin: 0;
            font-size: 30px;
            line-height: 38px;
            letter-spacing: 3px;

            color: #ffffff;
            text-shadow: 0 0 .3rem #00d8ff;

        }
    }

    .data-content {
        position: relative;
        width: 100%;
        height: 100%;
        max-height: var(--data-header-content);
        //display: grid;
        //grid-template-rows: 1.3fr 1fr;

        .data-content-top {
            //background-color: #004d8c;
            //height: 100%;
            height: var(--data-content);
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;

            //& > div {
            //    width: 100%;
            //    height: 100%;
            //}

            .data-content-left {
                height: var(--data-content);
                display: grid;
                grid-template-rows: 1fr 2fr;
            }

            .data-content-center {
                height: var(--data-content);
                display: flex;
                flex-direction: column;
            }

            .data-content-right {
                height: var(--data-content);
                display: grid;
                grid-template-rows: 1fr 1fr 1fr;
            }
        }

        .data-content-bottom {
            //background-color: #0072c6;
            height: calc(var(--data-header-content) * 1.65 / 6);
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
        }
    }
}

.data-time {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 101;
    display: flex;
    flex-direction: column;
    align-items: center;

    .date {
        --font-size: 18px;
        font-size: var(--font-size);
        line-height: calc(var(--font-size) + 8px);
        font-weight: bolder;
    }

    .time {
        --font-size: 12px;
        font-size: var(--font-size);
        line-height: calc(var(--font-size) + 8px);
    }
}
</style>